<template>
	<view>
		<template v-if="!business">
			<view class="index_hd">
				<!-- 导航栏 -->
				<view class="navigation">
					<image style="height: 25px;width: 90px;position: absolute;left:0;" src="../../static/image/logo.png" mode=""></image>
					<view class="navigation_title" >
						骑手入驻
					</view>
				</view>
			</view>
			<view class="content">
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							配送阶段
						</view>
						<radio-group name="" @change="setOptions">
							<label>
								<radio :value="1" checked /><text>第一阶段</text>
							</label>
							<label>
								<radio :value="2" /><text>第二阶段</text>
							</label>
						</radio-group>
						<!-- <view class="checkout_bt_input">
							<input type="text" v-model="info.userName" placeholder="请输入联系人" placeholder-class="placeholder">
						</view> -->
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							姓名
						</view>
						<view class="checkout_bt_input">
							<input type="text" v-model="info.userName" placeholder="请输入联系人" placeholder-class="placeholder">
						</view>
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							电话
						</view>
						<view class="checkout_bt_input">
							<input type="text" v-model="info.userPhone" placeholder="请输入电话" placeholder-class="placeholder">
						</view>
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							<!-- 支付宝账号 -->
							微信二维码
						</view>
						<!-- <view class="checkout_bt_input">
							<input type="text" v-model="info.userCard" placeholder="请输入支付宝账号" placeholder-class="placeholder">
						</view> -->
						<view class="imgUpload" @click="uploadImg(4)">
							<span v-if="!info.userCard">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.userCard" mode=""></image>
						</view>
					</view>
				</view>
				<!-- <view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							身份证正面
						</view>
						<view class="imgUpload" @click="uploadImg(1)">
							<span v-if="!info.idcardFrontImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.idcardFrontImg" mode=""></image>
						</view>
					</view>
				</view>
				<view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							身份证反面
						</view>
						<view class="imgUpload" @click="uploadImg(2)">
							<span v-if="!info.idcardBackImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.idcardBackImg" mode=""></image>
						</view>
					</view>
				</view> -->
				<!-- <view class="checkout_con_bt">
					<view class="checkout_con_remark">
						<view class="checkout_bt_label">
							健康证
						</view>
						<view class="imgUpload" @click="uploadImg(3)">
							<span v-if="!info.healthImg">选择照片</span>
							<image v-else style="height: 60px;width: 60px;" :src="domain + info.healthImg" mode=""></image>
						</view>
					</view>
				</view> -->
				<view>
					<!-- <button ></button> -->
					<view class="button" style="margin-top: 20px;width: 100%;height: 60px;margin-left:0;" @tap="submit()">
						提交审核
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<template v-if="allowStatus == 1">
				<view class="index_hd">
					<!-- 导航栏 -->
					<view class="navigation">
						<image style="height: 25px;width: 90px;position: absolute;left:0;" src="../../static/image/logo.png" mode=""></image>
						<view class="navigation_title">
							资料审核
						</view>
					</view>
				</view>
				<uni-card
				style="margin-top: 50px;"
				    title="审核通知"
				    :is-shadow="true"
				>
				       您的资料在审核中， 请耐心等待通知
				</uni-card>
			</template>
			<template v-if="allowStatus == 3">
				<view class="index_hd">
					<!-- 导航栏 -->
					<view class="navigation">
						<image style="height: 25px;width: 90px;position: absolute;left:0;" src="../../static/image/logo.png" mode=""></image>
						<view class="navigation_title">
							资料审核
						</view>
					</view>
				</view>
				<uni-card
				    title="审核通知"
				    :is-shadow="true"
				>
				       您的资料审核未通过
				</uni-card>
			</template>
			<template v-if="allowStatus == 2">
				<view class="pagenation">
					<image style="height: 25px;width: 90px;position: absolute;left:0;" src="../../static/image/logo.png" mode=""></image>
					<view class="pagenation_title">
						订单
					</view>
				</view>
				
				<view class="tabs">
					<view class="tab" v-for="(item,index) in tabs" :key="index"
						:class="orderStatus === item.status?'active':''" @click="setTab(item.status)">
						{{item.name}}
						<view class="tab_line"></view>
					</view>
				</view>
				
				<view class="order_list">
					<view class="order_item" v-for="(item,index) in orderList" :key="index">
						<view class="order_item_hd" @tap="toOrderDetail(item)">
						<!-- 	<view class="order_store_img">
								<image :src="item.storePic" mode="aspectFill"></image>
							</view> -->
							<view class="order_store_info">
								<view class="order_store_name">
									订单编号：{{item.orderNumber}}
								</view>
								<view class="order_time">
									订单时间：{{item.createTime}}
								</view>
								<view class="order_time">
									金额：{{item.amount}}
								</view>
								<view class="order_store_name" v-if="item.business">
									取餐地址：{{item.business.address}}
								</view>
								<view v-if="item.address" class="order_store_name">
									配送信息：
									<view style="padding-left: 20px;">
										用户：{{item.address.userName}}
									</view> 
									<view style="padding-left: 20px;">
										电话：{{item.address.userPhone}}
									</view> 
									<view style="padding-left: 20px;">
										地址：{{item.address.userAddress}}
									</view> 
								</view>
							</view>
							<view class="order_orderStatus">
								{{orderStatus == 0?'未出餐':orderStatus == 1?'待接单':orderStatus == 2? '待取餐':orderStatus == 3? '配送中':'已完成'}}
							</view>
						</view>
						<!-- <view class="order_item_bd" @tap="toOrderDetail(item)">
							<view class="order_goods">
								<view class="order_good" v-for="(item2,index2) in item.list" :key="index2 + 10">
									<view class="order_good_img">
										<image :src="item2.picUrl" mode=""></image>
									</view>
									<view class="order_good_name">
										{{item2.name}}
									</view>
								</view>
							</view>
							<view class="order_other">
								<view class="order_price">
									¥{{item.totalPirce}}
								</view>
								<view class="order_number">
									共{{item.number}}件
								</view>
							</view>
						</view> -->
						<view class="order_item_bt">
							<view class="button" v-if="orderStatus == 1"
								@tap="takeOrder(item)">
								接单
							</view>
							<view class="button"
								v-if="orderStatus == 2" @tap="tookOrder(item)">
								取餐
							</view>
							<view class="button"
								v-if="orderStatus == 3" @tap="sendOrder(item)">
								送达
							</view>
							<!-- <view class="order_item_pay" v-if="item.status == 3">
								骑手已取餐
							</view> -->
							<!-- <view class="order_item_pay" v-if="item.orderStatus == 2">
								确认收货
							</view>
							<view class="order_item_pay" v-if="item.orderStatus == 3" @tap="toEvaluate(item)">
								晒单评价
							</view> -->
						</view>
					</view>
					<uni-load-more :status="loadStatus"></uni-load-more>
				</view>
				
				<view class="mask" v-if="cancelFlag == true">
				
				</view>
				<view class="cancel_mask" v-if="cancelFlag == true">
					<view class="delete_title">
						确定要取消该订单吗？
					</view>
					<view class="delete_btns">
						<view class="delete_cancel" @tap="cancelDelete()">
							取消
						</view>
						<view class="delete_sure" @tap="sureDelete()">
							确定
						</view>
					</view>
				</view>
				
				<tabBar current="1" v-show="cancelFlag != true"></tabBar>
			</template>
		</template>
	</view>
</template>

<script>
	import { login, getStoreStatus, joinUs, getStoreOrder,takeStoreOrder,sendStoreOrder, tookStoreOrder } from '../../api/api.js'
	import server_url from '../../api/config.js'

	export default {
		data() {
			return {
				domain: server_url,
				business: uni.getStorageSync('info') || null,
				allowStatus: 2,
				info: {
					userName:'',
					userPhone:'',
					userCard:'',
					idcardFrontImg:'',
					idcardBackImg:'',
					healthImg:'',
					taskOption: 1
				},
				
				
				
				orderStatus: '1',
				loadStatus: 'nomore',
				query:{
					pageNum: 1,
					pageSize: 10,
					status: ''
				},
				tabs: [
					{
						name:'未出餐',
						status: '0'
					},
					{
						name: '新订单',
						status: '1'
					},
					{
						name: '待取餐',
						status: '2'
					},
					{
						name: '配送中',
						status: '3'
					},{
						name: '已完成',
						status: '4'
					},
				],
				orderList: [],
				cancelFlag: false
			};
		},
		onPullDownRefresh() {
			this.query.pageNum = 1
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.query.pageNum < this.pageCount) {
				this.query.pageNum++
				this.getList()
			}
		},
		methods: {
			setOptions(e) {
				this.info.taskOption = e.detail.value
			},
			takeOrder(item) {
				takeStoreOrder({orderId:item.id,taskOption: this.info.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
			},
			sendOrder(item) {
				sendStoreOrder({orderId:item.id, taskOption: this.info.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
			},
			tookOrder(item) {
				tookStoreOrder({orderId:item.id, taskOption: this.info.taskOption }).then(res => {
					uni.showToast({
						title: "操作成功",
						icon: 'none',
						duration: 2000
					})
					this.getList()
				})
			},
			submit() {
				if(!this.info.userName || !this.info.userPhone || !this.info.userCard) {
					uni.showToast({
						title: "请填写完整数据！",
						icon: 'none',
						duration: 2000
					})
					return
				}
				joinUs(this.info).then(res => {
					uni.showToast({
						title: "提交成功，请等待审核",
						icon: 'none',
						duration: 2000
					})
					this.allowStatus = 1
					this.business = this.info
				}) 
			},
			uploadImg(index) {
				// 示例代码
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading()
						uni.uploadFile({
							url: this.domain + '/api/common/upload', 
							filePath: tempFilePaths[0],
							name: 'file',
							// formData: {
							// 	'user': 'test'
							// },
							header:{
								'token': uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								if (index ==1) {
									this.info.idcardFrontImg = data.fileName
								}
								if (index ==2) {
									this.info.idcardBackImg = data.fileName
								}
								if (index ==3) {
									this.info.healthImg = data.fileName
								}
								if (index == 4) {
									this.info.userCard = data.fileName
								}
								uni.hideLoading()
							}
						});
					}
				});

			},
			setTab(status) {
				this.orderStatus = status
				this.query.pageNum = 1
				this.getList()
			},
			cancelDelete() {
				this.cancelFlag = false;
			},

			sureDelete() {
				this.cancelFlag = false;
				uni.showToast({
					title: "取消成功",
					icon: 'none',
					duration: 2000
				})
			},

			cancelOrder(item) {
				this.cancelFlag = true;
			},
			
			toOrderDetail(item){
				uni.navigateTo({
					url:'/pages/order/detail?id=' + item.id + '&status=' + this.orderStatus + '&taskOption=' + this.info.taskOption + '&idd=' + item.orderNumber
				})
			},
			toEvaluate(item){
				uni.navigateTo({
					url:'/pages/order/evaluate'
				})
			},
			getList() {
				uni.showLoading()
				this.query.status = this.orderStatus
				this.query.taskOption = this.info.taskOption
				getStoreOrder(this.query).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.dataHandle(res)
					}
				})
			},
			dataHandle(res) {
				if (this.query.pageNum == 1) {
					this.orderList = []
				}
				this.orderList.push(...res.rows)
				this.pageCount = Math.ceil(res.total / 10)
				if (this.query.pageNum >= this.pageCount) {
					this.loadStatus = 'nomore'
				} else {
					this.loadStatus = 'more'
				}
				uni.stopPullDownRefresh()
			},
			getInit() {
				uni.showLoading({mask:true})
				let that = this
				uni.login({
					success(res) {
						login({code:res.code, role: 2}).then(dd => {
							uni.setStorageSync('token', dd.data)
							getStoreStatus().then(res => {
								if(res.data) {
									that.business = res.data
									that.info = res.data
									uni.setStorageSync('info', that.info)
									that.allowStatus = res.data.status
									if(res.data && res.data.status == 2) {
										that.getList()
									}
								}
								uni.hideLoading()
							})
						})
					}
				})
			}
		},
		onShow() {
			if (uni.getStorageSync('info')) {
				this.info = uni.getStorageSync('info')
				this.business = uni.getStorageSync('info')
				this.allowStatus = this.info.status
				if(this.allowStatus == 1) {
					this.getInit()
				} else if (this.allowStatus == 2) {
					this.getList()
				}
			} else {
				this.getInit()
			}
		},
	}
</script>

<style lang="scss">
	.button {
		width: 168rpx;
		height: 56rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 24rpx;
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
		border-radius: 8rpx;
		color: #FFFFFF;
		font-size: 26rpx;
	}
	.submit_btn {
		position: fixed;
		bottom: 60rpx;
		left: 0;
		width: 100%;
		padding: 0 24rpx;
		
		button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 80rpx;
			border: 0;
			color: #fff;
			font-size: 26rpx;
			color: #fff;
			background-color: #2588FF;
		}
	}
	.content {
		padding: 40rpx 32rpx 180rpx;
		border-radius: 32rpx 32rpx 0 0;
		background-color: #fff;
		margin-top: -270rpx;
	}
	.index_hd {
		// width: 100%;
		height: 400rpx;
		padding: 70rpx 32rpx 0;
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
	
		.navigation {
			position: relative;
			text-align: center;
			color: #fff;
			font-size: 36rpx;
			font-weight: 500;
		}
		}
	.checkout_con_bt {
		// padding: 10px 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 24rpx;
	
		.checkout_con_remark {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
			border-bottom: 1rpx solid #E8E7E7;
		}
	
		.checkout_con_tableware {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx 0;
		}
	
		.checkout_bt_label {
			color: #2E343A;
			font-weight: 500;
			font-size: 28rpx;
		}
	
		.checkout_bt_input {
			input {
				text-align: right;
				color: #2E343A;
				font-weight: 500;
				font-size: 28rpx;
	
				&.placeholder {
					color: #9098A0;
				}
			}
	
		}
	}
	
	page {
		background-color: #F9FBFC;
	}

	.pagenation {
		background: linear-gradient(180deg, rgba(255, 141, 26, 1) 12.5%, rgba(255, 195, 0, 1) 100%);
		
		padding: 60rpx 24rpx 0;
		position: relative;
		.pagenation_title {
			text-align: center;
			font-size: 36rpx;
			color: #333;
			font-weight: bolder;
		}
	}

	.tabs {
		padding: 0 24rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 40rpx;

		.tab {
			position: relative;
			color: #666666;
			font-size: 28rpx;
			padding-bottom: 16rpx;

			&.active {
				color: rgba(255, 141, 26, 1);
				font-weight: bolder;

				.tab_line {
					display: block;
				}
			}

			.tab_line {
				display: none;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 4rpx;
				background-color: rgba(255, 141, 26, 1);
			}
		}
	}

	.order_list {
		margin-top: 30rpx;
		padding: 0 24rpx;
		padding-bottom: 180rpx;

		.order_item {
			background-color: #fff;
			padding: 0 24rpx;
			margin-bottom: 30rpx;

			.order_item_hd {
				position: relative;
				padding: 32rpx 0;
				display: flex;
				align-items: center;

				.order_store_img {
					width: 100rpx;
					height: 100rpx;
					flex-shrink: 0;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 8rpx;
					}
				}

				.order_store_info {
					margin-left: 15rpx;

					.order_store_name {
						font-size: 30rpx;
						font-weight: bolder;
						color: #2E343A;
					}

					.order_time {
						margin-top: 6rpx;
						color: #9098A0;
						font-size: 24rpx;
					}
				}

				.order_orderStatus {
					position: absolute;
					right: 0;
					font-size: 28rpx;
					color: #666666;
				}
			}

			.order_item_bd {
				position: relative;

				.order_goods {
					display: flex;

					.order_good {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-right: 10rpx;

						.order_good_img {
							width: 170rpx;
							height: 116rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
						}

						.order_good_name {
							color: #666666;
							font-size: 20rpx;
						}
					}
				}

				.order_other {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-80%);
					display: flex;
					flex-direction: column;
					align-items: center;

					.order_price {
						font-size: 32rpx;
						color: #000000;
						font-weight: 500;
					}

					.order_number {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.order_item_bt {
				padding: 32rpx 0;
				display: flex;
				justify-content: flex-end;

				.order_item_cancel {
					width: 156rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #D8D8D8;
					font-size: 26rpx;
					color: #2E343A;
					border-radius: 5rpx;
				}

				.order_item_pay {
					width: 156rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #2588FF;
					font-size: 26rpx;
					color: #fff;
					border-radius: 5rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.mask {
		position: fixed;
		z-index: 5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.cancel_mask {
		position: fixed;
		z-index: 5;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 610rpx;
		height: 300rpx;
		background-color: #fff;
		padding-top: 80rpx;
		border-radius: 12rpx;

		.delete_title {
			text-align: center;
			color: #2E343A;
			font-size: 32rpx;
			font-weight: 500;
		}

		.delete_btns {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 96rpx;
			border-top: 1rpx solid #ccc;
			display: flex;

			.delete_cancel {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 96rpx;
				color: #2E343A;
				border-right: 1rpx solid #ccc;
			}

			.delete_sure {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 50%;
				height: 96rpx;
				color: #2588FF;
			}
		}
	}
</style>